<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
js 操作图片对象，获取图片数据
1.根据html元素获取图片base64 编码
<script>
  // 参考案例/UI2/demo/picCut/mainActivity.w
  var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas");
  var data = result.toDataURL();
</script>

2.base64 编码转二进制对象
<script>
  Model.prototype.dataURLtoBlob = function(dataurl) {
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);

    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
  }
  //调用
  var blob = this.dataURLtoBlob(data);
</script>
3.二进制对象转base64 编码
<script>

  Model.prototype.readBlobAsDataURL = function(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {
      callback(e.target.result);
    };
    a.readAsDataURL(blob);
  }
  //调用
  this.readBlobAsDataURL(blob, function (dataurl){
    console.log(dataurl);
  });
</script>
4.base64图片对象，画出图片：
<script>
  Model.prototype.base64ForCanvas = function(data) {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0,200,200);
    };
    img.src = data;
  }

  //调用传base64数据
  this.base64ForCanvas(data);
</script>
5.二进制或图片文件对象，页面显示
<script>
  // Blob对象得到base64格式的url，再参考 base64图片数据绘制到canvas
  Model.prototype.blobForCanvas = function(blob) {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    this.readBlobAsDataURL(blob, function (dataurl){
      var img = new Image();
      img.onload = function(){
        ctx.drawImage(img,0,0,200,200);
      };
      img.src = dataurl;
    });
  }

  //调用传二进制数据
  this.base64ForCanvas(blob);
</script>
6.imageData 转 blob //imageData 转 blob
<script>
  Model.prototype.button3Click = function(event){
    var c = document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var imageData = ctx.getImageData(0,0,200,200);
    var data = imageData.data;
    var blob = new Blob([data]);
  };
</script>
7.Blob to ArrayBuffer //Blob to ArrayBuffer
<script>
  // 参考案例/UI2/demo/picCut/mainActivity.w
  var result = $('.cropper-example-1 > img').cropper("getCroppedCanvas");
  var data = result.toDataURL();
</script>
<script>
  var reader = new FileReader();
  reader.onload = function(e) {
    callback(e.target.result);
  };
  reader.readAsArrayBuffer(blob);
</script>

js获取图片数据流
<script>
  // 由Image对象获取图片的Base64

  // img: Image对象， width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小

  function getBase64Image (img, width, height) {

    const canvas = document.createElement('canvas')

    canvas.width = width || img.width

    canvas.height = height || img.height

    const ctx = canvas.getContext('2d')

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

    const dataURL = canvas.toDataURL()

    return dataURL

  }

  // 根据网络地址获取图片的Base64

  function getBase64 (img) {

    const image = new Image()

    image.crossOrigin = ''

    image.src = img

    return new Promise((resolve, reject) => {

      image.onload = function () {

        const base64Data = getBase64Image(image)

        resolve(base64Data)

      }

    })

  }
</script>
</body>
</html>